/* 页头 */
.header {
  height: 95vh; /* 视口(viewport)的95% */
  background-image: linear-gradient(
      to right bottom,
      rgba($color-primay-light, 0.8) /* #7ed56f 透明度80%，通过vs取色板调整 */,
      rgba($color-primay-dark, 0.8) /* #28b485 透明度80% */
    ),
    url("/img/hero.jpg");
  background-size: cover; /* 背景图片总是进行自适应 */
  background-position: top;
  position: relative;

  /* 裁剪 */
  /* 实用工具：https://bennettfeely.com/clippy/ */
  clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
  /* 等边三角形 */
  /* clip-path: polygon(50% 0, 100% 100%, 0 100%);  */

  &__logo-box {
    position: absolute;
    top: 4rem;
    left: 4rem;
  }
  &__logo {
    height: 3.5rem;
  }
  &__text-box {
    position: absolute;
    /* top/left：在父容器的位置 */
    /* top: 50%; */
    /* 由于父容器裁切(clip-path)的原因，此处使用 40% 更符合视觉效果 */
    top: 40%;
    left: 50%;
    /* translate：移动自己本身的位置 */
    transform: translate(-50%, -50%);
    text-align: center;
  }
}
